/*
 * @Author: Kiro AI Assistant
 * @Date: 2025-01-10
 * @Description: 音乐 UI 组件使用示例
 */

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../viewmodels/music_player_view_model.dart';
import '../widgets/music_widgets/index.dart';
import '../models/music_item_model.dart';

/// 音乐 UI 组件示例页面
/// 展示所有音乐相关 UI 组件的使用方法
class MusicWidgetsExample extends StatefulWidget {
  const MusicWidgetsExample({super.key});

  @override
  State<MusicWidgetsExample> createState() => _MusicWidgetsExampleState();
}

class _MusicWidgetsExampleState extends State<MusicWidgetsExample> {
  late MusicPlayerViewModel _viewModel;

  @override
  void initState() {
    super.initState();
    _viewModel = MusicPlayerViewModel();
    _setupSampleData();
  }

  @override
  void dispose() {
    _viewModel.dispose();
    super.dispose();
  }

  /// 设置示例数据
  void _setupSampleData() {
    const sampleMusic = MusicItemModel(
      id: 'sample_1',
      title: '示例歌曲',
      artist: '示例艺术家',
      album: '示例专辑',
      albumArt: 'https://via.placeholder.com/300x300.png?text=Album+Cover',
      audioUrl: 'https://www.soundjay.com/misc/sounds/bell-ringing-05.wav',
    );

    _viewModel.setPlaylist([sampleMusic]);
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<MusicPlayerViewModel>.value(
      value: _viewModel,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('音乐 UI 组件示例'),
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        ),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 专辑封面组件
              _buildSection(
                title: '专辑封面组件',
                child: const Center(
                  child: AlbumCoverWidget(
                    width: 200,
                    height: 200,
                  ),
                ),
              ),

              // 歌曲信息组件
              _buildSection(
                title: '歌曲信息组件',
                child: const SongInfoWidget(),
              ),

              // 播放进度组件
              _buildSection(
                title: '播放进度组件',
                child: const ProgressSliderWidget(),
              ),

              // 播放控制组件
              _buildSection(
                title: '播放控制组件',
                child: const PlaybackControlsWidget(),
              ),

              // 播放模式组件
              _buildSection(
                title: '播放模式组件',
                child: const Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      children: [
                        Text('图标模式'),
                        SizedBox(height: 8),
                        PlayModeWidget(size: 32),
                      ],
                    ),
                    Column(
                      children: [
                        Text('带标签模式'),
                        SizedBox(height: 8),
                        PlayModeWidget(
                          size: 24,
                          showLabel: true,
                          direction: Axis.vertical,
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Text('选择器模式'),
                        SizedBox(height: 8),
                        PlayModeSelector(buttonSize: 32),
                      ],
                    ),
                  ],
                ),
              ),

              // 紧凑版组件
              _buildSection(
                title: '紧凑版组件',
                child: const Column(
                  children: [
                    Card(
                      child: Padding(
                        padding: EdgeInsets.all(16.0),
                        child: Row(
                          children: [
                            AlbumCoverWidget(
                              width: 60,
                              height: 60,
                              borderRadius: 8,
                            ),
                            SizedBox(width: 12),
                            Expanded(
                              child: CompactSongInfoWidget(),
                            ),
                            SizedBox(width: 12),
                            CompactPlaybackControlsWidget(),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),

              // 控制按钮
              _buildSection(
                title: '测试控制',
                child: Wrap(
                  spacing: 8,
                  children: [
                    ElevatedButton(
                      onPressed: () => _viewModel.togglePlayPause(),
                      child: const Text('播放/暂停'),
                    ),
                    ElevatedButton(
                      onPressed: () => _viewModel.togglePlayMode(),
                      child: const Text('切换播放模式'),
                    ),
                    ElevatedButton(
                      onPressed: () =>
                          _viewModel.seekTo(const Duration(seconds: 30)),
                      child: const Text('跳转到 30 秒'),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建章节组件
  Widget _buildSection({
    required String title,
    required Widget child,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: Text(
            title,
            style: Theme.of(context).textTheme.titleLarge?.copyWith(
                  fontWeight: FontWeight.bold,
                ),
          ),
        ),
        Card(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: child,
          ),
        ),
        const SizedBox(height: 16),
      ],
    );
  }
}
